<!-- 列表每一项 -->
<template>
  <div>
    <q-item clickable v-ripple class="q-pa-none q-my-lg">
      <q-item-section avatar v-if="icon !== undefined">
        <q-avatar :color="props.color" text-color="white" :icon="props.icon" />
      </q-item-section>
      <!-- 判断屏幕尺寸 是否显示名称-->
      <q-item-section v-if="$q.screen.gt.xs">
        <q-item-label
          :class="ui.isDark ? 'text-white' : 'text-dark'"
          class="text-subtitle1"
          >{{ tLabel }}</q-item-label
        >
      </q-item-section>

      <q-item-section>
        <q-input
          :dark="ui.isDark"
          outlined
          :modelValue="props.modelValue"
          :label="$q.screen.gt.xs ? inputLabel : props.label"
        />
      </q-item-section>
    </q-item>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useUiStore } from "stores/ui";
import { onMounted, ref } from "vue";

const t = useI18n().t;
const si = "microService.inputItem."; // 路由名加当前文件名首字母 用于双语
const ui = useUiStore();
const tLabel = ref("");
const tInputLabel = ref("");
const props = defineProps({
  color: { type: String, default: "primary" },
  icon: { type: String },
  label: { type: String, default: "" },
  inputLabel: { type: String, default: "" },
  modelValue: String,
});
onMounted(() => {
  tLabel.value = props.label || t(si + "服务");
  tInputLabel.value = props.label || t(si + "服务路径");
});
</script>
